<template>
	<view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="swiperitem" v-for="(item,index) in shopData.goods_banner" :key="index">
				<image class="swpImg" mode="scaleToFill" :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="shops">
			<view class="price">￥<text>{{shopData.goods_price}}</text></view>
			<view class="title">{{shopData.goods_name}}</view>
		</view>

		<view class="content">
			<view class="bt">购买规格</view>
			<view class="colors_line"></view>
		</view>
		<view class="lintegralBox">
			<view @click="cklintegral(item.id)" class="lintegral" :class="inck==item.id?'lintegralck':''"
				v-for="(item,index) in shopData.skuList" :key="index">
				<view class="desc">{{item.name}}</view>
			</view>
		</view>
		<view class="buybtnbg"></view>
		<view class="buybtn" @click="API_buy(type,id)">立即购买</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '1',
				inck: 1,
				shopData: {
					goods_banner: [

						'https://so2.360tres.com/sdm/417_417_/t01d53be8e7f94b49fd.webp'


					],
					goods_price: '123.00',
					goods_name: '商品名字商品名字',
					skuList: [{
							id: 1,
							name: '15CM款',
						},
						{
							id: 2,
							name: '25CM款',
						},
						{
							id: 3,
							name: '35CM款',
						}
					]
				},
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getDetail()
		},
		methods: {
			cklintegral(id) {
				var that = this;
				that.inck = id;
				console.log('cklintegral', id)
				that.shopData.skuList.forEach(item => {
					if (item.id == id) {
						that.shopData.goods_price = item.price
					}
				})


			},
			// 获取商品详情
			getDetail() {
				var that = this;
				that.ran
					.request('/app-api/product/spu-ht/get-detail?id=' + that.id, {}, 'GET')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							let detail = res.data
							that.shopData.goods_banner = [detail.picUrl]

							that.shopData.goods_name = detail.name
							// 
							that.shopData.skuList = detail.skus
							if (that.shopData.skuList && that.shopData.skuList.length > 0) {
								that.shopData.goods_price = that.shopData.skuList[0].price
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}); 
			},
			API_buy() {
				var that = this;
				that.ran
					.request('/app-api/trade/order-ht/create-score-template', {
						"scoreTeamplateId": that.inck
					}, 'POST')
					.then(res => {
						console.log(res);
						if (res.code == 200) { // 下单成功 ，请求支付
							// 
							var openId = uni.getStorageSync('openid');
							let payOrderId = res.data.payOrderId
							that.ran
								.request('/app-api/pay/order/submitWxMiniPayParam', {
									"id": res.data.payOrderId,
									"channelCode": "wx_lite",
									"channelExtras": {
										"openid": openId
									}
								}, 'POST')
								.then(res => {
									console.log(res);
									if (res.code == 200) { // 下单成功 ，请求支付
										// submitWxMiniPayParam  
										let displayContent = JSON.parse(res.data.displayContent)
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: displayContent.timeStamp,
											nonceStr: displayContent.nonceStr,
											package: displayContent.packageValue,
											signType: displayContent.signType,
											paySign: displayContent.paySign,
											success: (res) => {
												uni.redirectTo({
													url:'/pages/mine/sucessful?type=1'
												})
												console.log(res)
											},
											fail: (err) => {console.log(err)
												uni.redirectTo({
													url:'/pages/mine/sucessful?type=2'
												})
											}
										});
										
										
									}
								});
						}
					});
			},


		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.lintegralBox {
		display: flex;
		margin: 10rpx 25rpx 50rpx;

		.lintegralck {
			border: 4rpx solid #302C29 !important;
		}

		.lintegral {
			flex: 1;
			text-align: center;
			margin: 10rpx 20rpx;
			border-radius: 20rpx;
			padding: 20rpx 0;
			border: 4rpx solid #fff;

			.desc {
				line-height: 60rpx;
				color: #333;
			}

			.price {
				font-weight: bold;
				font-size: 40rpx;

				text {
					font-size: 22rpx
				}
			}
		}

		.lintegral:nth-child(1) {
			background-image: linear-gradient(to right, #FFE9D0, #FCB7A0);
		}

		.lintegral:nth-child(2) {
			background-image: linear-gradient(to right, #FED0ED, #FF9B9F);
		}

		.lintegral:nth-child(3) {
			background-image: linear-gradient(to right, #A8C1EE, #F8C2EB);
		}
	}

	.tr {
		text-align: right;
	}

	.buybtnbg {
		width: 750upx;
		height: 110upx;
	}

	.buybtn {
		width: 750upx;
		height: 100upx;
		line-height: 100upx;
		color: #fff;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		background-image: linear-gradient(to right, #191919, #000);
	}

	.buybtn:active {
		background: #000;
	}

	.swiper {
		width: 650upx;
		height: 650upx;
		margin: 20rpx auto;
	}

	.swpImg {
		width: 650upx;
		height: 650upx;
		border-radius: 20rpx;
	}

	.shops {
		background: #fff;
		border-radius: 10upx;
		padding: 0 20upx;

		.title {
			line-height: 1.5;
			font-size: 26upx;
			padding: 20upx 0;
		}

		.price {
			font-size: 26upx;
			color: #000;

			text {
				font-size: 38upx;
				font-weight: bold;

			}
		}
	}

	.content {
		background: #fff;
		border-bottom: 1px solid #ededed;

		.colors_line {
			width: 120upx;
			height: 8upx;
			margin: 0 auto;
			border-radius: 10upx;
			background-image: linear-gradient(to right, #191919, #000);
		}

		.bt {
			line-height: 80upx;
			text-align: center;

		}
	}

	.imgBox {
		image {
			width: 750upx !important;
			display: block;
			margin: auto;
		}

		img {
			width: 750upx !important;
			display: block;
			margin: auto;
		}
	}
</style>